<!--
  * 登录
  *
  * @Author:    zhoujk
  * @Date:      2025-02-05 15:35
  *
-->
<template>
  <div class="login-container">
    <div class="box-item desc">
      <div class="welcome">
        <p>欢迎登录智尊宝平台</p>
      </div>
      <img class="welcome-img" :src="leftBg2" />
    </div>
    <div class="box-item login">
      <div class="login-title">账号登录</div>
      <a-form ref="formRef" class="login-form" :model="loginForm" :rules="rules">
        <a-form-item name="userType">
          <a-select v-model:value="loginForm.userType">
            <a-select-option v-for="item in ZZB_USER_TYPE_ENUM" :key="item.value" :value="item.value">
              {{ item.desc }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="loginName">
          <a-input type="text" v-model:value.trim="loginForm.loginName" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item name="emailCode" v-if="emailCodeShowFlag">
          <a-input-group compact>
            <a-input style="width: calc(100% - 110px)" v-model:value="loginForm.emailCode" autocomplete="on" placeholder="请输入邮箱验证码" />
            <a-button @click="sendSmsCode" class="code-btn" type="primary" :disabled="emailCodeButtonDisabled">
              {{ emailCodeTips }}
            </a-button>
          </a-input-group>
        </a-form-item>
        <a-form-item name="password">
          <a-input-password
            v-model:value="loginForm.pwd"
            autocomplete="on"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码：至少三种字符，最小 8 位"
          />
        </a-form-item>
        <a-form-item name="captchaCode">
          <a-input class="captcha-input" v-model:value.trim="loginForm.captchaCode" placeholder="请输入验证码" />
          <img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />
        </a-form-item>
        <a-form-item>
          <a-flex justify="right">
            <!--<a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>-->
            <a-button type="link" @click="goTo('/texting')">忘记密码？</a-button>
          </a-flex>
        </a-form-item>
        <a-form-item>
          <div class="btn" @click="onLogin">登录</div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup name="Login">
  import { message } from 'ant-design-vue'
  import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import { loginApi } from '/src/api/system/b-auth/login-api'
  import { SmartLoading } from '/@/components/framework/smart-loading'
  import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const'
  import { useUserStore } from '/@/store/modules/system/user'
  import leftBg2 from '/@/assets/images/login/left-bg2.png'
  import { buildRoutes } from '/@/router/index'
  import { smartSentry } from '/@/lib/smart-sentry'
  import { localSave } from '/@/utils/local-util.js'
  import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js'
  import { ZZB_USER_TYPE_ENUM } from '/@/constants/system/system-const.js'

  //--------------------- 登录表单 ---------------------------------

  const loginForm = reactive({
    userType: ZZB_USER_TYPE_ENUM.USER_TYPE_PLATFORM.value,
    loginName: '',
    pwd: '',
    captchaCode: '',
    captchaUuid: '',
    lDeviceType: LOGIN_DEVICE_ENUM.PC.value,
  })
  const rules = {
    userType: [{ required: true, message: '用户类型不能为空' }],
    loginName: [{ required: true, message: '用户名不能为空' }],
    pwd: [{ required: true, message: '密码不能为空' }],
    captchaCode: [{ required: true, message: '验证码不能为空' }],
  }

  const showPassword = ref(false)
  const router = useRouter()
  const formRef = ref()
  const rememberPwd = ref(false)

  onMounted(() => {
    document.onkeyup = (e) => {
      if (e.keyCode === 13) {
        onLogin()
      }
    }
  })

  onUnmounted(() => {
    document.onkeyup = null
  })

  //登录
  async function onLogin() {
    formRef.value.validate().then(async () => {
      try {
        SmartLoading.show()
        // 密码加密
        let encryptPasswordForm = Object.assign({}, loginForm, {
          // password: sm4EncryptData(loginForm.password),
          pwd: loginForm.pwd,
        })
        const res = await loginApi.login(encryptPasswordForm)
        stopRefreshCaptchaInterval()
        localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '')
        message.success('登录成功')
        //更新用户信息到pinia
        useUserStore().setUserLoginInfo(res.data)
        //构建系统的路由
        buildRoutes()
        router.push('/home')
      } catch (e) {
        if (e.data && e.data.code !== 0) {
          loginForm.captchaCode = ''
          getCaptcha()
        }
        smartSentry.captureError(e)
      } finally {
        SmartLoading.hide()
      }
    })
  }

  //--------------------- 验证码 ---------------------------------

  const captchaBase64Image = ref('')

  async function getCaptcha() {
    localSave(LocalStorageKeyConst.USER_TYPE, loginForm.userType ? loginForm.userType : ZZB_USER_TYPE_ENUM.USER_TYPE_PLATFORM.value)

    try {
      let captchaResult = await loginApi.getCaptcha()
      captchaBase64Image.value = captchaResult.data.captchaBase64Image
      loginForm.captchaUuid = captchaResult.data.captchaUuid
      beginRefreshCaptchaInterval(captchaResult.data.captchaExpireTime)
    } catch (e) {
      console.log('e==>', e)
    }
  }

  let refreshCaptchaInterval = null

  function beginRefreshCaptchaInterval(expireSeconds = 6) {
    if (refreshCaptchaInterval === null) {
      refreshCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000)
    }
  }

  function stopRefreshCaptchaInterval() {
    if (refreshCaptchaInterval != null) {
      clearInterval(refreshCaptchaInterval)
      refreshCaptchaInterval = null
    }
  }

  onMounted(() => {
    getCaptcha()
    // getTwoFactorLoginFlag();
  })

  //--------------------- 邮箱验证码 ---------------------------------

  const emailCodeShowFlag = ref(false)
  let emailCodeTips = ref('获取邮箱验证码')
  let emailCodeButtonDisabled = ref(false)
  // 定时器
  let countDownTimer = null

  // 开始倒计时
  function runCountDown() {
    emailCodeButtonDisabled.value = true
    let countDown = 60
    emailCodeTips.value = `${countDown}秒后重新获取`
    countDownTimer = setInterval(() => {
      if (countDown > 1) {
        countDown--
        emailCodeTips.value = `${countDown}秒后重新获取`
      } else {
        clearInterval(countDownTimer)
        emailCodeButtonDisabled.value = false
        emailCodeTips.value = '获取验证码'
      }
    }, 1000)
  }

  // 获取双因子登录标识
  async function getTwoFactorLoginFlag() {
    try {
      let result = await loginApi.getTwoFactorLoginFlag()
      emailCodeShowFlag.value = result.data
    } catch (e) {
      smartSentry.captureError(e)
    }
  }

  // 发送邮箱验证码
  async function sendSmsCode() {
    try {
      SmartLoading.show()
      let result = await loginApi.sendLoginEmailCode(loginForm.loginName)
      message.success('验证码发送成功!请登录邮箱查看验证码~')
      runCountDown()
    } catch (e) {
      smartSentry.captureError(e)
    } finally {
      SmartLoading.hide()
    }
  }

  function goTo(url, data) {
    router.push({ path: url, query: data })
  }
  watch(
    () => loginForm.userType,
    () => {
      getCaptcha()
    },
  )
</script>
<style lang="less" scoped>
  @import './login.less';
</style>
